<template>
	<view class="container">
		<view class="header">
			<view class="head-container">
				<view class="head-left" @click="closeBack">
					<uni-icons type="back" color="white" size="20"></uni-icons>
				</view>
				<view class="head-center"></view>
				<view class="head-right">
					<uni-icons type="gear" color="white" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<view class="video-stream">
			<video id="video" object-fit="cover" class="video" loop preload :controls="false" :show-fullscreen-btn="false" :show-progress="false" :show-play-btn="false" :show-center-play-btn="false" :enable-progress-gesture="false" :mobilenet-hint-type="0" :src="src" @click="touchVideo"></video>
		</view>
	</view>
</template>


<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { onLoad } from '@dcloudio/uni-app'
	let src = ref < string > ()
	let videoContext=ref(null)
	let isVideoPlay=ref<boolean>(true)
	onMounted(() => {
		videoContext.value=uni.createVideoContext('video',this)
		videoContext.value.play()
		
	})
	onLoad((e)=>{
		console.log(e)
		src.value=e.tempFilePath
	})
	
	const closeBack = () => {
		console.log('back')
		uni.navigateBack()
	}
	const touchVideo=()=>{
		if(isVideoPlay.value){
			videoContext.value.pause()
			isVideoPlay.value=false
		}else{
			videoContext.value.play()
			isVideoPlay.value=true
		}
	}
</script>

<style scoped lang="scss">
	body,
	html {
		width: 100%;
		height: 100%;
		padding: 0px;
		border: 0px;
	}
	.container {
		width: 100%;
		height: 100vh;
		background-color: black;
	}
	.header {
		font-size: 30rpx;
		line-height: 100rpx;
		color: white;
		width: 100%;
		height: 100rpx;
		display: flex;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 10000;
		.head-container{
			width:730rpx;
			height:80rpx;
			margin:auto;
			.head-left{
				width:80rpx;
				height:80rpx;
				float: left;
				text-align: center;
				line-height: 80rpx;
				
			}
			.head-right{
				width:80rpx;
				height:80rpx;
				float: right;
				text-align: center;
				line-height: 80rpx;
				
			}
		}
	}
	
	.video-stream{
		width:100%;
		height:100%;
		.video {
			width: 100%;
			height: 100%;
		}
	}
</style>
